<template>
  <view class="page-container">
    <view class="top-padding"></view>
    <view class="header">
      <view class="title">
        <uni-icons type="left" size="24" color="#333" class="back-icon" @click="navigateBack"/>
        <text class="name">{{ storeDetail.name }}</text>
        <uni-tag 
          v-if="storeDetail.store_type"
          :text="storeDetail.store_type"
          type="warning"
          size="small"
        />
        <text class="status-text" :class="!storeDetail.is_deleted ? 'open' : 'closed'">
          {{ storeDetail.is_deleted ? '(已停业)' : '' }}
        </text>
        <view class="toggle-detail" @click="toggleDetail">
          <text>详情</text>
        </view>
      </view>
    </view>

    <view class="detail-section" v-show="showDetail">
      <view class="detail-item">
        <text class="label">营业时间：</text>
        <text class="value">{{ Util.formatTime(storeDetail.open_time) }}-{{ Util.formatTime(storeDetail.close_time) }}</text>
      </view>
      <view class="detail-item">
        <text class="label">联系电话：</text>
        <text class="value">{{ storeDetail.phone || '暂无' }}</text>
      </view>
      <view class="detail-item">
        <text class="label">店铺地址：</text>
        <text class="value">{{ storeDetail.address || '暂无' }}</text>
      </view>
      <view class="detail-item">
        <text class="label">店铺描述：</text>
        <text class="value">{{ storeDetail.description || '暂无' }}</text>
      </view>
      <!-- 将图片移动到描述后面 -->
      <view class="thumbnail-container" v-if="storeDetail.image_url">
        <image 
          class="store-thumbnail" 
          :src="storeDetail.image_url" 
          mode="aspectFill"
        />
      </view>
    </view>
  <!-- 添加最近30分钟订单组件 -->
  <view class="recent-orders-wrapper">
    <recent-orders 
      ref="recentOrders" v-if="storeDetail.store_id" 
      :store-id="storeDetail.store_id" 
    />
  </view>
  <!-- 替换用户相关部分为组件 -->
  <view class="recent-orders-wrapper">
    <user-list v-if="storeDetail.store_id" ref="userList" :store-id="storeDetail.store_id" />
  </view> 
  <view class="bottom-padding"></view>
  <!-- 添加底部导航 -->
  <tab-bar />
  </view>
</template>

<script>
import store from '@/utils/store.js';
import Util from '@/utils/util.js';
import UserList from '@/pages/user/index.vue';
import RecentOrders from '@/pages/order/RecentOrders.vue';
import TabBar from '@/components/tab-bar/tab-bar.vue';

export default {
  components: {
    UserList,
    RecentOrders,
    TabBar
  },
  data() {
    return {
      Util,
      storeDetail: {},
      showDetail: false
    };
  },
  onLoad(options) {
    if (options.id) {
      this.fetchStoreDetail(options.id);
    } else {
      uni.showToast({
        title: '缺少店铺ID参数',
        icon: 'none'
      });
    }
  },
  onShow() {
    this.refreshChildComponents();
    // 强制刷新user-list组件
    if (this.$refs.userList) {
      this.$refs.userList.handleSearch();
    }
  },
  methods: {
    toggleDetail() {
      this.showDetail = !this.showDetail;
    },
    handlePageChange(e) {
      this.pagination.page = e.current;
    },
    computed: {
      userRole() {
        const roleMap = {
          'manager': '店长',
          'staff': '员工', 
          'owner': '店主',
          'customer': '顾客'
        };
        return this.storeDetail.role ? roleMap[this.storeDetail.role] || '' : '';
      }
    },
    async fetchStoreDetail(id) {
      try {
        const res = await store.getStoreById(id);
        this.storeDetail = res.data || {}; // 确保有默认对象
        // 添加日志检查store_id
        console.log('store_id:', this.storeDetail.store_id); 
      } catch (error) {
        uni.showToast({
          title: '获取店铺详情失败',
          icon: 'none'
        });
      }
    },
    refreshChildComponents() {
        this.$refs.recentOrders?.fetchRecentOrders();
    },
    // 添加返回方法
    navigateBack() {
      uni.navigateBack();
    },
  }
};
</script>

<style lang="scss">
@import '@/uni.scss';

.content {
  padding-bottom: 100rpx;
}

.store-list {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.store-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.store-thumbnail {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  border: 1rpx solid #eee;
}

.store-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
}

.store-name {
  font-size: 32rpx;
  color: #333;
}

.store-meta {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.store-time {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 移除原有的.store-card等样式 */
.detail-link {
  display: flex;
  align-items: center;
  color: #999;
}

.detail-text {
  font-size: 28rpx;
  margin-right: 10rpx;
}



/* #ifdef H5 */
.detail-container {
  padding: 20rpx;
  padding-bottom: 120rpx; /* 增加底部padding，避免内容被遮挡 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* #endif */

/* #ifdef MP-WEIXIN */
.detail-container {
  padding: 20rpx;
  padding-bottom: 120rpx; /* 增加底部padding，避免内容被遮挡 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-top: 60rpx;
}
/* #endif */

/* 添加以下样式确保所有直接子元素100%宽度 */
.detail-container > view {
  width: 100%;
}

.header {
  margin-bottom: 30rpx;
}

.store-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
}

.title {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.detail-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
}

.label {
  color: #666;
  width: 150rpx;
}

.value {
  flex: 1;
  color: #333;
}

.open {
  color: #09BB07;
}

.closed {
  color: #E64340;
}

/* 新增缩略图样式 */
.thumbnail-container {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
}

.store-thumbnail {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  border: 1rpx solid #eee;
}
/* 添加返回按钮样式 */
.back-icon {
  margin-right: 20rpx;
  padding: 10rpx;
}

/* 确保组件在微信小程序中100%宽度 */
.recent-orders-wrapper {
  width: 100%;
}

/* 微信小程序特定样式 */
/* #ifdef MP-WEIXIN */
.recent-orders-wrapper > view {
  width: 100% !important;
}
/* #endif */
.user-role {
  margin-left: 10rpx;
  padding: 0 10rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666;
}
</style>

